<template>
  <CommonBox
    :info-display1="false"
    :info-display2="false"
    :selectDisplay="true"
    :btnDisplay1="true"
    :btnDisplay2="false"
  >
    <template v-slot:subtitle
      ><span class="subtitle">关键信息显示</span></template
    >
    <template v-slot:footer>
      <div v-for="item in info" :key="item.title">
        <div class="item-wrap">
          <img :src="item.pic" />
          <div>{{ item.title }}</div>
          <div class="info-box">{{ item.info }}</div>
          <div>{{ item.update }}</div>
        </div>
        <el-divider></el-divider>
      </div>
    </template>
  </CommonBox>
</template>

<script>
import CommonBox from "./CommonBox.vue";
export default {
  data() {
    return {
      info: [
        {
          pic: require("../../assets/images/Shujufenxi/images/shujufenxi_27.png"),
          title: "播种时间",
          info: "2021-3-15",
          update: "更新时间在24小时之内",
        },
        {
          pic: require("../../assets/images/Shujufenxi/images/shujufenxi_30.png"),
          title: "收获时间",
          info: "2021-6-15",
          update: "更新时间在24小时之内",
        },
        {
          pic: require("../../assets/images/Shujufenxi/images/shujufenxi_34.png"),
          title: "当前状态",
          info: "幼苗期",
          update: "更新时间在24小时之内",
        },
        {
          pic: require("../../assets/images/Shujufenxi/images/shujufenxi_37.png"),
          title: "预估产量",
          info: "180千克/亩",
          update: "更新时间在24小时之内",
        },
      ],
    };
  },
  components: {
    CommonBox,
  },
};
</script>

<style lang="less" scoped>
.subtitle {
  font-weight: 800;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px 20px 30px;
  height: 68px;
  .info-box {
    width: 100px;
  }
}
.el-divider {
  margin: 0;
}
</style>